<template>
  <div class="property-panel">
    <h3>属性配置</h3>
    <div class="property-form">
      <el-form :model="currentItem" label-width="80px" label-position="left">
        <!-- 基础属性 -->
        <el-divider content-position="left">基础属性</el-divider>

        <el-form-item label="字段名">
          <el-input v-model="currentItem.model" />
        </el-form-item>

        <el-form-item label="标签文本">
          <el-input v-model="currentItem.options.label" />
        </el-form-item>

        <el-form-item label="占位文本">
          <el-input v-model="currentItem.options.placeholder" />
        </el-form-item>

        <el-form-item label="宽度">
          <el-input v-model="currentItem.options.width" placeholder="例如: 100% 或 200px" />
        </el-form-item>

        <el-form-item label="是否必填">
          <el-switch v-model="currentItem.options.required" />
        </el-form-item>

        <!-- 类型特定属性 -->
        <template v-if="currentItem.type === 'input'">
          <el-divider content-position="left">文本属性</el-divider>
          <el-form-item label="最大长度">
            <el-input-number
              v-model="currentItem.options.maxLength"
              :min="1"
              :controls="false"
              placeholder="不限"
            />
          </el-form-item>
        </template>

        <template v-if="currentItem.type === 'textarea'">
          <el-divider content-position="left">文本域属性</el-divider>
          <el-form-item label="行数">
            <el-input-number v-model="currentItem.options.rows" :min="2" :max="10" />
          </el-form-item>
        </template>

        <template v-if="currentItem.type === 'number'">
          <el-divider content-position="left">数字属性</el-divider>
          <el-form-item label="最小值">
            <el-input-number
              v-model="currentItem.options.min"
              :controls="false"
              placeholder="不限"
            />
          </el-form-item>
          <el-form-item label="最大值">
            <el-input-number
              v-model="currentItem.options.max"
              :controls="false"
              placeholder="不限"
            />
          </el-form-item>
        </template>

        <template v-if="['select', 'radio', 'checkbox'].includes(currentItem.type)">
          <el-divider content-position="left">选项配置</el-divider>
          <div class="options-config">
            <div
              v-for="(option, index) in currentItem.options.options"
              :key="index"
              class="option-item"
            >
              <el-input v-model="option.label" placeholder="显示文本" style="margin-bottom: 8px" />
              <el-input v-model="option.value" placeholder="值" />
              <el-button type="danger" text @click="removeOption(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <el-button type="primary" text @click="addOption">
              <el-icon><Plus /></el-icon>
              添加选项
            </el-button>
          </div>
        </template>

        <template v-if="currentItem.type === 'date'">
          <el-divider content-position="left">日期属性</el-divider>
          <el-form-item label="格式">
            <el-select v-model="currentItem.options.format">
              <el-option label="年-月-日" value="YYYY-MM-DD" />
              <el-option label="年-月-日 时:分:秒" value="YYYY-MM-DD HH:mm:ss" />
              <el-option label="月/日/年" value="MM/DD/YYYY" />
            </el-select>
          </el-form-item>
        </template>

        <!-- 在 PropertyPanel.vue 的模板中添加对新组件的属性配置 -->
        <template v-if="currentItem.type === 'section'">
          <el-divider content-position="left">章节属性</el-divider>
          <el-form-item label="章节标题">
            <el-input v-model="currentItem.options.title" />
          </el-form-item>
          <el-form-item label="标题级别">
            <el-select v-model="currentItem.options.level">
              <el-option label="一级标题" :value="1" />
              <el-option label="二级标题" :value="2" />
              <el-option label="三级标题" :value="3" />
            </el-select>
          </el-form-item>
        </template>

        <template v-if="currentItem.type === 'paragraph'">
          <el-divider content-position="left">段落属性</el-divider>
          <el-form-item label="段落内容">
            <el-input v-model="currentItem.options.content" type="textarea" :rows="4" />
          </el-form-item>
        </template>

        <template v-if="currentItem.type === 'signature'">
          <el-divider content-position="left">签名属性</el-divider>
          <el-form-item label="标签文本">
            <el-input v-model="currentItem.options.label" />
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'

export default {
  name: 'PropertyPanel',
  components: {
    Delete,
    Plus,
  },
  props: {
    selectedItem: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:selected-item'],
  setup(props, { emit }) {
    const currentItem = ref({ ...props.selectedItem })

    // 监听props变化
    watch(
      () => props.selectedItem,
      (newVal) => {
        currentItem.value = { ...newVal }
      },
      { deep: true },
    )

    // 监听当前项变化并通知父组件
    watch(
      currentItem,
      (newVal) => {
        emit('update:selected-item', { ...newVal })
      },
      { deep: true },
    )

    const addOption = () => {
      if (!currentItem.value.options.options) {
        currentItem.value.options.options = []
      }
      currentItem.value.options.options.push({
        label: `选项${currentItem.value.options.options.length + 1}`,
        value: `option${currentItem.value.options.options.length + 1}`,
      })
    }

    const removeOption = (index) => {
      currentItem.value.options.options.splice(index, 1)
    }

    return {
      currentItem,
      addOption,
      removeOption,
    }
  },
}
</script>

<style scoped>
.property-panel h3 {
  margin-bottom: 16px;
  color: #303133;
}

.property-form {
  background: white;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.options-config {
  margin-bottom: 16px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.option-item .el-input {
  flex: 1;
}

.el-divider {
  margin: 20px 0;
}

.el-divider__text {
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
}
</style>
